<template>
  <div class="login">
    <div class="loginBox">
      <div class="app">
        <p class="title">填写&nbsp;&nbsp;验证码</p>
        <p class="dec">
          验证码已发送至
          <span>{{$route.query.phone | 1000}}</span>
        </p>
        <div class="v-code">
          <input
            ref="vcode"
            id="vcode"
            type="tel"
            maxlength="6"
            v-model="code"
            @focus="focused = true"
            @blur="focused = false"
            :disabled="telDisabled"
          >

          <label
            for="vcode"
            class="line"
            v-for="(item,index) in codeLength"
            :key="item"
            :class="{'animated': focused && cursorIndex === index}"
            v-text="codeArr[index]"
          ></label>
        </div>

        <div class="sign">
          <div>
            <span class="code" @click="send()" v-if="show">重新发送</span>
            <span class="code" v-if="!show">{{count}}秒后重新发送</span>
          </div>

          <img v-if="this.code.length != 6" src="@as/img/xiayibu_moren@2x.png">

          <img v-if="this.code.length  == 6" src="@as/img/xiayibu@2x.png" alt @click="submit()">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const TIME_COUNT = 60;
export default {
  data() {
    return {
      show: true,
      count: 60,
      timer: "",

      code: "", // input value
      codeLength: 6, // 验证码长度
      telDisabled: false, // 判断是否输入完
      focused: false // 让input焦点, 决定光标显示所在的位置
    };
  },
  computed: {
    codeArr() {
      // 将 input value 分隔数组 [1, 2, 3]
      return this.code.split("");
    },
    cursorIndex() {
      // 判断code输入长度，光标显示在对应label上
      return this.code.length;
    }
  },
  watch: {
    code(newVal) {
      //限制 非数字
      this.code = newVal.replace(/[^\d]/g, "");
      if (newVal.length > 5) {
        // 禁用 input && 失去焦点 让键盘消失
        this.telDisabled = true;
        this.$refs.vcode.blur();
        // submit !!!
        // setTimeout(() => {
        //   alert(`vcode: ${this.code}`);
        // }, 500);
      }
    }
  },
  mounted() {
    this.send();
  },
  methods: {
    send() {
      this.$http.post("/index/index/sendMsg", {
        phone: this.$route.query.phone,
        org_id: "11"
      });
      this.get();
       this.$progress.done();
    },
    get() {
      this.show = false;
      this.count = TIME_COUNT;
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },

    submit() {
      this.$http
        .post("/index/index/checkMsg", {
          phone: this.$route.query.phone,
          code: this.code
        })
        .then(res => {
          this.$toast.success(res.msg);
          this.$http
            .get("/applets/Register/is_empty", {
              phone: this.$route.query.phone,
              type: "1"
            })
            .then(res => {
              if (this.$route.query.forgetPassword) {
                if (res.data.type == "1") {
                  this.$router.push({
                    path: "/setPassword",
                    query: {
                      phone: this.$route.query.phone
                    }
                  });
                  return;
                }

                if (res.data.type == "0") {
                  this.$confirm("该手机号未注册，是否注册", "提示", {
                    type: "warning"
                  }).then(({ result }) => {
                    if (result) {
                      this.$router.push({
                        path: "/information",
                        query: {
                          phone: this.$route.query.phone,
                          type: "1"
                        }
                      });
                    } else {
                      this.$router.push({
                        path: "/login",
                      });
                    }
                  });

                  return;
                }
              }
              //未注册
              if (res.data.type == "0") {
                this.$router.push({
                  path: "/information",
                  query: {
                    phone: this.$route.query.phone,
                    type: "1"
                  }
                });
                return;
              }
              //已注册
              if (res.data.type == "1") {
                this.$router.push({
                  path: "/repeat",
                  query: {
                    phone: this.$route.query.phone,
                    name: res.data.name
                  }
                });
                return;
              }
            });
        });
      this.code = "";
      this.telDisabled = false;
    }
  }
};
</script>

<style scoped lang="scss">
.title {
  font-size: 36px;
  margin-top:50px;
  margin-bottom: 60px;
  font-weight: Medium;

}

.dec {
  margin-top: 10px;
  font-size: 14px;
  color: #b6b6b6;
  span {
    color: #f47548;
  }
}
.code {
  font-size: 14px;
  color: #b6b6b6;
}
.sign {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;

  div {
    width: 125px;
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
  }
  p {
    font-size: 12.5px;
    color: #f47548;
  }

  img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  font-family: -apple-system, PingFang SC, Hiragino Sans GB, Helvetica Neue,
    Arial;
  -webkit-tap-highlight-color: transparent;

}
::-webkit-scrollbar {display: none !important;}
.app {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.heading-2 {
  color: #333333;
}
.v-code {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.v-code input {
  position: absolute;
  top: -100%;
  left: -666666px;
  opacity: 0;
}

.v-code .line {
  margin-top: 30px;
  position: relative;
  width: 40px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 28px;
}
.v-code .line::after {
  display: block;
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  bottom: 0;
  height: 1px;
  background-color: #aaaaaa;
  transform: scaleY(0.5);
  transform-origin: 0 100%;
}
.v-code .line.animated::before {
  display: block;
  position: absolute;
  left: 50%;
  top: 20%;
  width: 1px;
  height: 60%;
  content: "";
  background-color: #333333;
  animation-name: coruscate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

/*.v-code .line.animated::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background-color: #000000;
  }*/

@keyframes coruscate {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>